<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--
        <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/plugins/zTree/js/jquery.ztree.all.js"></script>
    <link href="/static/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">


        //给layer 父页面调用的函数,用来获取被选中的id
        window.getChoseId=function () {
            var array = new Array();
            var treeObj=$.fn.zTree.getZTreeObj("treeConfig"),
                 nodes=treeObj.getCheckedNodes(true);
                    //, v="";
            for(var i=0;i<nodes.length;i++){
                array[i] = nodes[i].id;
                //v+=nodes[i].name + ",";
                //console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值
            }
            console.log(array);
            return array;
        };
        <!-- ============================= ztree ============================ -->

        //ztree 的一些配置
        var setting = {
            data: {
                simpleData: {enable: true}
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            },
            view: {
                showLine: true
            },
            callback: {
                onClick: onClick,
                onCheck: onCheck,
            }
        }


        //要被渲染的数据
        var zNodes =[
             <#list permissions as permission>
              {id:${permission.permissionId},
                  <#if permission.parentId??>
                     pId:${permission.parentId},
                  </#if>
                  name: '${permission.permissionName}'},
             </#list>
        ];

        $(function(){
            //初始化ztree
            $.fn.zTree.init($("#treeConfig"), setting, zNodes);

            var treeObj = $.fn.zTree.getZTreeObj("treeConfig");

            <#list hasPermissionIds as hasPermissionId>
                  var node = treeObj.getNodeByParam("id",${hasPermissionId});
                  treeObj.checkNode(node,true,false);
            </#list>
            var nodes = treeObj.getNodes();
            for (var i = 0; i < nodes.length; i++) { //设置所有节点展开
                treeObj.expandNode(nodes[i], true, true, false);
            }
        });

        //ztree 的点击事件 （点击回调）
        function onClick(e,treeId,treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeConfig");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        //选中事件（选中回调）
        function onCheck(e,treeId,treeNode){
            var array = new Array();
            var treeObj=$.fn.zTree.getZTreeObj("treeConfig"),
                    nodes=treeObj.getCheckedNodes(true),
                    v="";
            for(var i=0;i<nodes.length;i++){
                v+=nodes[i].name + ",";
                array[i] = nodes[i].id;
                console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值
                console.log(array);
            }
        }

        <!--  ------------------------ ztree ---------------------- -->

    </script>
</head>
<body>

<div id="treeContainer" class="treeContainer">
    <ul id="treeConfig" class="ztree"></ul>
</div>

</body>
</html>
